<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>双向绑定</title>
</head>
<body style="background-color: aliceblue;">
    <div style="width: 400px;margin: 100px auto;">
        <div style="background-color:darkorange;border-radius: 10px;padding: 5px 20px;box-shadow: 1px 2px #dcd6d6;">
            <h2>演示区</h2>
            请输入内容：<input type="text" id="input_id">
            <p id="p_id"></p>
        </div>
        <div style="background-color:gainsboro;border-radius: 10px;padding: 5px 20px;box-shadow: 1px 2px #dcd6d6;margin-top: 50px;">
            <h2>说明区</h2>
            <p>1.创建一个空对象存储数据</p>
            <p>2.对空对象使用Object.defineProperty()，监听对象数据的变化</p>
            <p>3.为input元素设置事件keyup，并将输入数据存储到对象的属性中</p>    
            <p>4.这样，每当input数据变化，对象都能监听到，并为对应元素设置属性值</p>    
        </div>
    </div>
   
</body>
<script>
    let val_obj={}
    Object.defineProperty(val_obj,'e_value',{
        get:function(){

        },
        set:function(_v){
            document.getElementById('input_id').value=_v
            document.getElementById('p_id').innerHTML=_v
        }
    })

    document.addEventListener('keyup',function(e){
        val_obj.e_value=e.target.value
    })
</script>
</html>